<%@ page import="com.flats.webview.Utils" %>
<%@ page import="java.util.Set" %>
<%@ page import="com.flats.utils.Constants" %>
<%--@elvariable id="countryList" type="java.util.TreeSet<com.flats.model.entity.Address>"--%>
<link rel="stylesheet" href="<c:url value="/css/search.css" />">
<div class="search-container">
    <form class="search-form" role="form">
        <select class="form-control dropdown pull-left country">
            <%
                String country = (String) Utils.getSession(Constants.COUNTRY);
                Set<String> countries = (Set<String>) Utils.getSession(Constants.COUNTRIES);
                if (country != null) {
            %>
            <c:set var="countrySess" value="<%=country%>"/>
            <c:set var="countriesSess" value="<%=countries%>"/>
            <%} else {%>
            <option selected>Country</option>
            <%}%>
            <c:if test="${not empty countryList}">
                <c:forEach var="country" items="${countryList}">
                    <option>${country}</option>
                </c:forEach>
            </c:if>
            <c:if test="${empty countryList}">
                <c:forEach var="country" items="${countriesSess}">
                    <option <c:if test="${country==countrySess}">selected</c:if>>${country}</option>
                </c:forEach>
            </c:if>
        </select>
        <select class="form-control dropdown pull-left city">
            <%
                String city = (String) Utils.getSession(Constants.CITY);
                Set<String> cities = (Set<String>) Utils.getSession(Constants.CITIES);
                if (city != null) {
            %>
            <c:set var="citySess" value="<%=city%>"/>
            <c:set var="citiesSess" value="<%=cities%>"/>
            <%--<option><%=city%>--%>
            <%--</option>--%>
            <%} else {%>
            <option selected>City</option>
            <%}%>
            <c:forEach var="city" items="${citiesSess}">
                <option <c:if test="${city==citySess}">selected</c:if>>${city}</option>
            </c:forEach>
        </select>
        <select class="form-control dropdown pull-left street">
            <%
                String street = (String) Utils.getSession(Constants.STREET);
                Set<String> streets = (Set<String>) Utils.getSession(Constants.STREETS);
                if (street != null) {
            %>
            <c:set var="streetSess" value="<%=street%>"/>
            <c:set var="streetsSess" value="<%=streets%>"/>
            <%--<option><%=street%>--%>
            <%--</option>--%>
            <%} else {%>
            <option selected>Street</option>
            <%}%>
            <c:forEach var="street" items="${streetsSess}">
                <option <c:if test="${street==streetSess}">selected</c:if>>${street}</option>
            </c:forEach>
        </select>

        <div class="checkbox pull-left">
            <label>
                <input type="checkbox" value="">
                Only with photo
            </label>
        </div>

        <div class="price-range pull-left">
            <p>
                <label class="amount" for="amount">Price range:</label>
                <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>
            </p>

            <div id="slider-range"></div>
        </div>

        <div class="rooms pull-left">
            <div>Number of rooms</div>
            <input id="spinner">
        </div>

        <button type="button" class="btn btn-danger find">Find</button>

        <div class="additional-search">
            <span>Key words:</span>
            <input class="form-control" type="text" placeholder="Default input">
        </div>
    </form>
</div>
<script>
    (function ($) {
        $(function () {
            console.log("search jsp");
            $.ajax({
                url: "searchModel",
                success: function () {
                    console.log("search model received");
                }
            });
            var $country = $('.country');
            var $city = $('.city');
            var $street = $('.street');
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 10000,
                values: [ 0, 0 ],
                slide: function (event, ui) {
                    $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
                }
            });
            $("#amount").val("$" + $("#slider-range").slider("values", 0) +
                    " - $" + $("#slider-range").slider("values", 1));
            $("#spinner").spinner({ min: 0, max: 6});
            $(".find").on("click", function () {
                console.log("CLICKED");
                if ($('.flat-header nav.auth').hasClass('hidden')) {
                    console.log("USER IN SESSION");
                    $.ajax({
                        url: "show.flats",
                        beforeSend: function () {
                            $("#loaderDiv").css('display', 'block');
                        },
                        complete: function () {
                            console.log("find ajax complete");
                            $("#loaderDiv").css('display', 'none');
                            window.location.href="show.flats";
                        }

                    });
//                    window.location.href = "show.flats";
                }else{
                    console.log("USER NOT IN SESSION");
                    $('#myModal').modal();
                }
            });

            $country.on('change', function () {
                console.log("change country");
                $.ajax({
                    url: "country",
                    data: "country=" + $country.val(),
                    success: function (response) {
                        console.log("response", response);
                        $city.html("<option selected>City</option>");
                        $(response).each(function (i, v) {
                            console.log("city list resp ");
                            console.log("i = ", i);
                            console.log("v = ", v);
                            $city.append("<option>" + v + "</option>");
                        });
                        $street.html("<option selected>Street</option>");
                        console.log($city);
                    }
                });
            });
            $city.on('change', function () {
                console.log("change city");
                $.ajax({
                    url: "city",
                    data: "city=" + $city.val(),
                    success: function (response) {
                        console.log("response", response);
                        $street.html("<option selected>Street</option>");
                        $(response).each(function (i, v) {
                            $street.append("<option>" + v + "</option>");
                        });
                        console.log($street);
                    }
                });
            });
            $street.on('change', function () {
                console.log("street city");
                $.ajax({
                    url: "street",
                    data: "street=" + $street.val()/*,
                     success: function (response) {
                     console.log("response");
                     }*/
                });
            });
        });
    })(jQuery);

</script>